<!-- 总配置 -->
<template>
    <div class='page-main' v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)">
        <el-form ref="form" :model="form" label-width="130px" class="dialog-form">
            <el-form-item label="上传交管局">
                <el-radio v-model="form.is_open" label="1">开</el-radio>
                <el-radio v-model="form.is_open" label="0">关</el-radio>
            </el-form-item>
            <el-form-item label="运费抹零">
                <el-radio v-model="form.prices" label="1">开</el-radio>
                <el-radio v-model="form.prices" label="0">关</el-radio>
            </el-form-item>
            <el-form-item label="app强制更新">
                <el-radio v-model="form.update" label="1">开</el-radio>
                <el-radio v-model="form.update" label="0">关</el-radio>
            </el-form-item>
            <el-form-item label="更新内容">
                <el-input type="textarea" :rows="1" resize="none" placeholder="请输入内容" v-model="form.text">
                </el-input>
            </el-form-item>

            <el-form-item label="已作废服务费" class="label-red">
                <el-input v-model="form.service" readonly></el-input>
            </el-form-item>

            <el-form-item label="已作废油卡比例" class="label-red">
                <el-input v-model="form.service" readonly></el-input>
            </el-form-item>
            <el-form-item label="待提货提醒时间">
                <el-input v-model="form.goods_time">
                    <template slot="append">分钟</template>
                </el-input>
            </el-form-item>
            <el-form-item label="待提货删除时间">
                <el-input v-model="form.del_goods_time">
                    <template slot="append">分钟</template>
                </el-input>
            </el-form-item>
            <el-form-item label="每月">
                <el-input v-model="form.tixing" class="remind">
                    <template slot="append">号之后提醒</template>
                </el-input>
            </el-form-item>
            <el-form-item label="提醒内容">
                <el-input v-model="form.txcontent">
                </el-input>
            </el-form-item>
            <el-form-item label="定位费(元)">
                <el-input v-model="form.position">
                </el-input>
            </el-form-item>
            <el-form-item label="定位费出费人">
                <el-select v-model="form.positions" placeholder="请选择">
                    <el-option v-for="(item) in options" :label="item.label" :key="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="短信费(元)">
                <el-input v-model="form.message">
                </el-input>
            </el-form-item>
            <el-form-item label="短信费出费人">
                <el-select v-model="form.messages" placeholder="请选择">
                    <el-option v-for="(item) in options" :label="item.label" :key="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="合同费(元)">
                <el-input v-model="form.hetong"></el-input>
            </el-form-item>
            <el-form-item label="合同费出费人">
                <el-select v-model="form.hetongs" placeholder="请选择">
                    <el-option v-for="(item) in options" :label="item.label" :key="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="司机手续费">
                <el-input v-model="form.driver_fee">
                    <template slot="append">元</template>
                </el-input>
            </el-form-item>
            <el-form-item label="电子围栏距离" class="flex">
                <el-input-number v-model="form.bill_distance" controls-position="right" :min="0"
                    :controls="false"></el-input-number>
                <div class="unit">KM</div>
            </el-form-item>
            <el-form-item label="Android升级版本">
                <el-input v-model="form.android"></el-input>
            </el-form-item>
            <el-form-item label="Android下载链接">
                <el-input v-model="form.adizhi" class="input-text-overflow">
                    <template slot="append">
                        <el-button @click="copyTest(form.adizhi)">复制</el-button>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label="ios升级版本">
                <el-input v-model="form.ios"></el-input>
            </el-form-item>
            <el-form-item label="ios下载链接">
                <el-input v-model="form.dizhi" class="input-text-overflow">
                    <template slot="append">
                        <el-button @click="copyTest(form.dizhi)">复制</el-button>
                    </template>
                </el-input>
            </el-form-item>

            <div class="btn-box">
                <el-button type="primary" @click="save">保存</el-button>

                <el-image src="http://app.zhgylgl.com/houtai/images/load.jpg"
                    style="width: 328px;margin: 20px auto 100px;"></el-image>

            </div>
        </el-form>
    </div>
</template>

<script>
import { getConfigDetail, updateConfigDetail } from '@/api/set';
import { copyText } from '@/utils/tool'
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            form: {},
            options: [{
                label: '请选择',
                value: '0'
            },
            {
                label: '司机',
                value: '1'
            },
            {
                label: '货主',
                value: '2'
            }, {
                label: '全部',
                value: '3'
            }],
            loading: false,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        async getConfigDetail() {
            let res = await getConfigDetail()
            if (res.code == 200) {
                this.form = res.data;
            }
        },
        copyTest(text) {
            copyText(text);
            this.$message.success('复制成功!')
        },
        save() {
            this.$confirm('确定要保存系统配置吗？', '系统提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                this.loading = true;
                let { text,
                    driver_fee,
                    goods_time,
                    del_goods_time,
                    tixing, txcontent,
                    position,
                    positions,
                    message,
                    messages,
                    hetong,
                    hetongs,
                    android,
                    adizhi,
                    ios,
                    dizhi,
                    is_open,
                    prices,
                    update,
                    bill_distance } = this.form;
                let res = await updateConfigDetail({
                    text,
                    driver_fee,
                    goods_time,
                    del_goods_time,
                    tixing,
                    txcontent,
                    position,
                    positions,
                    message,
                    messages,
                    hetong,
                    hetongs,
                    android,
                    adizhi,
                    ios,
                    dizhi,
                    is_open,
                    prices,
                    update,
                    bill_distance
                })

                if (res.code == 200) {
                    this.$message.success(res.msg)
                } else {
                    this.$message.error(res.msg)
                }
                this.getConfigDetail();
                this.loading = false;

            }).catch((e) => {
                console.log(e);
            });
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.getConfigDetail();
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
::v-deep .dialog-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 0 20%;

    &>.el-form-item {
        width: 45%;

        &>.el-form-item__content {
            width: 70%;
        }
    }

    .el-textarea {
        height: 40px;

        .el-textarea__inner {
            height: 40px;
        }
    }


    .flex {
        .el-form-item__content {
            display: flex;
        }
    }

    .unit {
        height: 40px;
        padding: 0 20px;
        transform: scaleX(1.02);
        background-color: #f5f7fa;
        color: #999;
        border: 1px solid #DCDFE6;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }


    .el-input-number {
        width: 100%;

        // .el-input-number__decrease {
        //     display: none;
        // }

        // .el-input-number__increase {
        //     display: none;
        // }

        .el-input__inner {
            text-align: left;
            padding-right: 30px;
        }
    }
}

::v-deep .dialogInForm {
    .el-input {
        width: 120px;
    }
}

::v-deep .remind {

    .el-input-group__append {
        border-left: none;
        background-color: #fff;
        font-weight: 700;
        color: #606266;
    }
}

.btn-box {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    ::v-deep .el-button {
        width: 200px;
    }
}

.label-red {
    ::v-deep .el-form-item__label {
        color: red;
    }
}

.input-text-overflow {
    ::v-deep .el-input__inner {
        text-overflow: ellipsis;
    }
}
</style>